<template>
  <div class="app-container">
    <el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="关键词">
        <el-input clearable v-model="searchForm.keyword" placeholder="搜索" @keyup.enter.native="search"></el-input>
      </el-form-item>
      <el-form-item label="注销状态">
        <el-select v-model="searchForm.cancel_expire" placeholder="注销状态" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option label="注销中" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活跃时间">
        <el-date-picker
          v-model="searchForm.active_time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00','23:59:59']"
          :picker-options="{
            shortcuts: [
              {
             text: '最近一周',
             onClick: (picker) => {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
            },
            {
              text: '最近一个月',
              onClick: (picker) => {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }]
          }"

        />
      </el-form-item>
      <el-form-item label="排序">
        <el-select v-model="listQuery.sort" placeholder="排序" clearable>
          <el-option label="默认" value=""></el-option>
          <el-option label="注册时间" value="created_at"></el-option>
          <el-option label="登录时间" value="last_login_time"></el-option>
          <el-option label="更新时间" value="updated_at"></el-option>
          <el-option label="活跃时间" value="last_active_at"></el-option>
          <el-option label="记账笔数" value="bill_count"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="#" width="95">
        <template v-slot:default="{scope,row}">
          {{ row.user_id }}
        </template>
      </el-table-column>

      <el-table-column label="账号" width="150" align="left">
        <template v-slot:default="{scope,row}">
          <span :title="row.remark||'暂无备注'">{{ row.account }}</span> <span :title="row.cancel_expire"
                                                                               v-if="row.cancel_expire" class="bs-red"
        >（注销中）</span>
        </template>
      </el-table-column>
      <el-table-column label="头像" width="60" align="center">
        <template v-slot:default="{scope,row}">
          <el-image v-if="row.avatar" :src="row.avatar" :preview-src-list="[row.avatar]"/>
        </template>
      </el-table-column>
      <el-table-column label="昵称" width="150">
        <template v-slot:default="{scope,row}">
          {{ row.username }}
        </template>
      </el-table-column>

      <el-table-column label="邀请码" width="100">
        <template v-slot:default="{scope,row}">
          {{ row.user_code }}
        </template>
      </el-table-column>
      <el-table-column label="记账笔数" align="center" width="100">
        <template v-slot:default="{scope,row}">
          {{ row.cash_count }}
        </template>
      </el-table-column>

      <el-table-column label="活跃时间" width="160" align="center">
        <template v-slot:default="{scope,row}">
          <span>{{ row.last_active_time || '/' }}</span>
          <br>
          <span class="bs-green">{{ row.last_active_platform }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" width="170" align="center">
        <template v-slot:default="{scope,row}">
          <span>{{ row.created_at }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后登录时间" width="170" align="center">
        <template v-slot:default="{scope,row}">
          <span>{{ row.last_login_time }}</span>
        </template>
      </el-table-column>

      <el-table-column label="最后登录IP" width="170" align="center">
        <template v-slot:default="{scope,row}">
          <span>{{ row.last_login_ip }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" width="180" align="center">
        <template v-slot:default="{scope,row}">
          {{ row.email }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="操作" fixed="right">
        <template v-slot:default="{scope,row}">
          <el-row>
            <el-button type="primary" icon="el-icon-edit" circle
                       @click="$router.push({path:'/user/form',query:{user_code:row.user_code}})"
            ></el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                @pagination="fetchData"
    />
  </div>

</template>

<script>
import api from '@/api/member'
import Pagination from '@/components/Pagination'

export default {
  components: {
    Pagination
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        '1': 'success',
        '0': 'gray',
        '-1': 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        sort: ''
      },
      searchForm: {
        keyword: ''
      }
    }
  },

  created() {
    if (this.$route.query.hasOwnProperty('user_id')) {
      this.searchForm.keyword = this.$route.query.user_id
      this.listQuery = Object.assign(this.listQuery, this.searchForm)
    }
    this.fetchData()
  },
  methods: {
    handleCategorySelect(category) {
      this.searchForm.category_id = category
    },
    fetchData() {
      this.listLoading = true
      api.getList(this.listQuery).then(response => {

        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    search() {
      this.listQuery.page = 1
      this.listQuery = Object.assign(this.listQuery, this.searchForm)
      this.fetchData()
    }
  }

}
</script>

<style>
.el-image {
  width: 46px;
  height: 46px;
}

.bs-red {
  color: #ff0000;
}

.bs-green {
  color: #089c08;
}
</style>
